<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-face-recognition-container`]">
      <view v-if="form.verifyResult == '0'">
        <view class="preview-img">
          <image class="image" :src="$CDN('/common/static/images/shibie_shibai@3x.png')"></image>
        </view>
        <view class="status">人脸识别失败</view>
        <view class="message"></view>
        <uv-button v-if="scene === 'bill'" type="primary" @click="handleJump('/pages/subpackage/contract/index')">返回合同</uv-button>
        <uv-button v-if="scene === 'auth'" type="primary" @click="handleJump('/pages/user/information')">返回</uv-button>
      </view>
      <view v-if="form.verifyResult == '1'">
        <view class="preview-img">
          <image class="image" :src="$CDN('/common/static/images/face-result.png')"></image>
        </view>
        <view class="status">人脸识别成功</view>
        <view class="message"></view>
        <uv-button v-if="scene === 'bill'" type="primary" @click="submit()">确认签字</uv-button>
        <uv-button v-if="scene === 'auth'" type="primary" @click="handleJump('/pages/user/user-form')">完成验证</uv-button>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { getFaceResult, getSignUrl, userFaceResult } from '@/api/bestSign'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'result',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      scene: '',
      form: {
        orderNo: '',
        similarity: '',
        photo: '',
        verifyResult: '',
        message: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    // this.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { scene } = this.$Route.query
      this.scene = scene
      if (scene == 'bill') {
        await this.billFaceResult()
      } else if (scene == 'auth') {
        await this.userFaceResult()
      }
    },
    // 预定 签约账单模块 人脸回调结果
    async billFaceResult() {
      const { orderNo } = this.$Route.query
      const { data, errcode } = await getFaceResult({ orderNo })
      if (errcode === 0) {
        for (let key in this.form) {
          this.form[key] = data[key] ? data[key] : this.form[key]
        }
      }
    },
    // 用户实名认证人脸回调结果
    async userFaceResult() {
      const { orderNo } = this.$Route.query
      const { data, errcode } = await userFaceResult({ orderNo })
      if (errcode === 0) {
        for (let key in this.form) {
          this.form[key] = data[key] ? data[key] : this.form[key]
        }
      }
    },
    async submit() {
      // 人脸识别成功 调用签字
      const { id } = this.$Route.query
      let url = ''
      // sign 1 为新签 2为续签
      // #ifdef MP-WEIXIN
      url = `/pages/subpackage/online-signing/signing-result?id=${id}&sign=1`
      // #endif
      // #ifdef APP-PLUS
      url = `sxj://pages/subpackage/online-signing/signing-result?id=${id}&sign=1`
      // #endif
      // #ifdef H5
      url = `${this.$Helper.getRootUrl()}pages/subpackage/online-signing/signing-result?id=${id}&sign=1`
      // #endif
      const { data, errcode } = await getSignUrl({ id, url })
      if (errcode === 0) {
        this.$ROUTE.go(data.url)
        // uni.redirectTo({ url: data.url })
      }
    },
    handleJump(path) {
      uni.redirectTo({ url: path })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('face-recognition-container')} {
  position: relative;
  background: #ffffff;
  padding: 15px;
  .row-tips-1,
  .row-tips-2 {
    color: #333333;
    font-size: 24rpx;
    text-align: center;
    margin-top: 20rpx;
  }
  .popup-header {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 10px 0;
  }
  .popup-content {
    padding: 0px 20px 30px;
    .content {
      font-size: 24rpx;
    }
    .title {
      font-size: 24rpx;
      font-weight: bold;
      text-align: center;
    }
  }
  .popup-buttom {
    padding: 0 20px 10px;
  }
  .preview-img {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    .image {
      width: 120px;
      height: 120px;
    }
  }
  .message,
  .status {
    text-align: center;
  }
  .message {
    margin-bottom: 50px;
  }
  .fixed-bottom {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    padding: 15px;
  }
}
</style>
